<template>
  <div class="temp_container">
    <div class="top_container">
      <div class="back_arrow">
        <van-icon name="arrow-left" size="0.6rem" @click="back()" />
      </div>
      <div class="top_title_container">
        <div class="title">{{ currentTitle }}</div>
      </div>
    </div>
    <div class="content_container">
      <div class="title_container">
        <div class="star">*</div>
        <Field v-model="form.tempTitle" placeholder="请填写模板名称" />
      </div>
      <div class="list_container drag">
        <div
          class="item_li drag_li"
          v-for="(item, index) in addList"
          :key="item.id"
          :class="{ activeClass: currentIndex == index }"
          @click="itemClick(index)"
        >
          <div class="star" v-if="item.State == 1">*</div>
          <Field
            v-model="item.Key"
            placeholder="请填写文本标题，如【今日完成工作】"
            v-if="item.Type == 1"
          />
          <Field
            v-model="item.Key"
            placeholder="请填写数字标题"
            v-if="item.Type == 2"
          />
          <Field
            v-model="item.Key"
            placeholder="请填写单选标题"
            v-if="item.Type == 3"
          />
          <Field
            v-model="item.Key"
            placeholder="请填写日期标题"
            v-if="item.Type == 5"
          />
          <Field
            v-model="item.Key"
            placeholder="请填写多选标题"
            v-if="item.Type == 7"
          />
          <div class="special" v-if="item.Type == 8">
            <Field v-model="item.Key" placeholder="请填写图片标题" />
            <van-icon
              class="iconfont"
              class-prefix="icon"
              name="tupian"
              size="0.5rem"
              style="margin-right: 10px"
            />
          </div>
          <div class="special" v-if="item.Type == 9">
            <Field v-model="item.Key" placeholder="请填写附件标题" />
            <van-icon
              class="iconfont"
              class-prefix="icon"
              name="fujian"
              size="0.5rem"
              style="margin-right: 10px"
            />
          </div>
          <div class="handle" v-if="currentIndex == index">
            <div class="handle_li" style="cursor: pointer">
              <van-icon
                name="edit"
                size="0.4rem"
                style="font-weight: bold; margin-top: 2px; cursor: pointer"
                color="#4aa2e2"
                @click.stop="editItem(item, index)"
              />
              <div
                style="margin-left: 5px; cursor: pointer"
                @click.stop="editItem(item, index)"
              >
                编辑
              </div>
            </div>
            <div class="handle_li" style="cursor: pointer">
              <van-icon
                class="iconfont"
                class-prefix="icon"
                name="paixu"
                size="0.4rem"
                style="font-weight: bold; margin-top: 2px; cursor: pointer"
                color="#4aa2e2"
              />
              <div style="margin-left: 5px; cursor: pointer">排序</div>
            </div>
            <div class="handle_li">
              <van-icon
                name="delete-o"
                size="0.4rem"
                style="font-weight: bold; margin-top: 2px; cursor: pointer"
                color="#4aa2e2"
                @click="delItem(index)"
              />
              <div
                style="margin-left: 5px; cursor: pointer"
                @click="delItem(index)"
              >
                删除
              </div>
            </div>
          </div>
        </div>
        <div class="add_btn" @click="addHandle()">
          <van-icon name="plus" size="0.5rem" color="#acadb1" />
          <div class="text">添加</div>
        </div>
      </div>
    </div>

    <div class="bottom_container">
      <div class="text_item" @click="addHandle()">
        <div class="icon">
          <van-icon name="plus" color="#acadb1" size="0.7rem" />
        </div>
        <div class="text">添加</div>
      </div>
      <div class="btn_item">
        <div class="btn" @click="createHandle()">下一步</div>
      </div>
    </div>

    <!-- 标题列表弹出层 -->
    <van-popup
      v-model:show="listFlag"
      position="bottom"
      round
      :style="{ height: '60%' }"
    >
      <div class="add_container">
        <div class="add_title">添加字段</div>
        <div
          class="add_item"
          v-for="(item, index) in filedList"
          :key="index"
          @click="addItem(item)"
        >
          <div class="icon">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              :name="item.icon"
              size="0.5rem"
            />
          </div>
          <div class="item_text">
            {{ item.label }}
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 编辑弹框 -->
    <van-popup
      v-model:show="editFlag"
      position="bottom"
      round
      :style="{ height: '70%' }"
      @close="closeEdit()"
    >
      <div class="edit_container">
        <div class="edit_title">
          <div>编辑字段</div>
          <div class="save" @click="closeEdit()">保存</div>
        </div>
        <div class="edit_box">
          <div class="edit_item">
            <div class="item_content">
              <div class="item_label">标题</div>
              <div class="item_name">
                <Field v-model="editForm.Key" placeholder="请输入标题" />
              </div>
            </div>
          </div>
          <div class="edit_item">
            <div class="item_content" style="border: none">
              <div class="item_label">提示文字</div>
              <div class="item_name">
                <Field
                  v-model="editForm.PromptText"
                  placeholder="请输入提示文字"
                />
              </div>
            </div>
          </div>
          <div
            class="edit_options"
            v-if="editForm.Type == 3 || editForm.Type == 7"
          >
            <div class="label">选项</div>
            <div class="option_box">
              <div class="option_item" v-for="(item, index) in editForm.Value">
                <div class="del_icon" @click="delOption(index)">
                  <div class="line"></div>
                </div>
                <div class="option_value">
                  <Field v-model="item.name" placeholder="请输入选项值" />
                </div>
                <!-- <div class="drag_icon">
                  <van-icon
                    class="iconfont"
                    class-prefix="icon"
                    name="drag"
                    size="0.4rem"
                  />
                </div> -->
              </div>
              <div
                class="option_item"
                style="border: none"
                @click="addOption()"
              >
                <div class="add_icon">
                  <van-icon name="add" color="#26b984" size="0.6rem" />
                </div>
                <div class="add_text">添加选项</div>
              </div>
            </div>
          </div>
          <div class="edit_require">
            <div class="text">必填</div>
            <van-switch
              v-model="editForm.State"
              size="0.5rem"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Dialog, Toast, Field } from "vant";
import Sortable from "sortablejs";
import { GetTemplateInfo } from "@/api/log";
onMounted(() => {
  rowDrag(); // 初始化行拖拽事件
  if (route.query.id) {
    currentId.value = route.query.id;
  }
  if (localStorage.getItem("tempLog")) {
    //本地有缓存先取缓存的数据
    form.tempTitle = JSON.parse(localStorage.getItem("tempLog")).name;
    addList.value = JSON.parse(localStorage.getItem("tempLog")).fields;
  } else {
    getInfo();
  }
});
const rowDrag = () => {
  const elA = document.querySelector(".drag");
  nextTick(() => {
    Sortable.create(elA, {
      animation: 180,
      group: "drag",
      handle: ".drag_li",
      // 结束拖动事件
      onEnd: (res) => {
        currentIndex.value = res.newIndex;
        const temp = addList.value.splice(res.oldIndex, 1)[0];
        addList.value.splice(res.newIndex, 0, temp);
      },
    });
  });
};
//回显
const getInfo = async () => {
  if (!currentId.value) {
    //创建
    form.tempTitle = "";
    addList.value = [
      {
        label: "文本",
        Type: 1,
        Key: "",
        PromptText: "",
        Value: [],
        State: 0,
        id: 0,
      },
    ];
  } else {
    //编辑
    const res = await GetTemplateInfo({ id: currentId.value });
    if (res.code == 200) {
      form.tempTitle = res.data.name;
      addList.value = res.data.fields;
      for (let i = 0; i < addList.value.length; i++) {
        addList.value[i].Type = addList.value[i].type;
        addList.value[i].Key = addList.value[i].key;
        addList.value[i].PromptText = addList.value[i].promptText;
        addList.value[i].Value = addList.value[i].value
          ? addList.value[i].value.split(",").map((item) => {
              return { name: item };
            })
          : [];
        addList.value[i].State = addList.value[i].state;
        addList.value[i].id = i;
      }
    }
  }
};
const route = useRoute();
const router = useRouter();
const back = () => {
  Dialog.confirm({
    title: "确定退出吗",
  })
    .then(() => {
      router.go(-1);
      localStorage.setItem("tempLog", ""); //清除列表数据
      localStorage.setItem("localPermissLog", ""); //清除权限设置数据
    })
    .catch(() => {});
};
const currentTitle = ref("");
currentTitle.value = route.meta.title;
const currentId = ref(null);
const form = reactive({
  tempTitle: "",
});
const editForm = ref({});
const currentIndex = ref(0);
const filedList = ref([
  {
    icon: "wenben",
    label: "文本",
    Type: 1,
    Key: "",
    PromptText: "",
    Value: [],
    State: 0,
  },
  {
    icon: "shuzishurukuang",
    label: "数字",
    Type: 2,
    Key: "",
    PromptText: "",
    Value: [],
    State: 0,
  },
  {
    icon: "danxuanxuanzhong",
    label: "单选",
    Type: 3,
    Key: "",
    PromptText: "",
    Value: [],
    State: 0,
  },
  {
    icon: "calendar",
    label: "日期",
    Type: 5,
    Key: "",
    PromptText: "",
    Value: [],
    State: 0,
  },
  {
    icon: "duoxuanxuanzhong_o",
    label: "多选",
    Type: 7,
    Key: "",
    PromptText: "",
    Value: [],
    State: 0,
  },
  {
    icon: "tupian",
    label: "图片",
    Type: 8,
    Key: "图片",
    PromptText: "",
    Value: [],
    State: 0,
  },
  {
    icon: "fujian",
    label: "附件",
    Type: 9,
    Key: "附件",
    PromptText: "",
    Value: [],
    State: 0,
  },
]);
let addList = ref([]);

const itemClick = (val) => {
  currentIndex.value = val;
};
//删除项目
const delItem = (i) => {
  Dialog.confirm({
    title: "确定删除吗",
  })
    .then(() => {
      addList.value.splice(i, 1);
      currentIndex.value = addList.value.length - 1;
    })
    .catch(() => {});
};
const listFlag = ref(false);
const editFlag = ref(false);
const editIndex = ref(0);
//编辑
const editItem = (item, i) => {
  editFlag.value = true;
  editForm.value = item;
  editIndex.value = i;
};
//添加选项
const addOption = () => {
  editForm.value.Value.push({
    name: "",
  });
};
//删除选项
const delOption = (i) => {
  editForm.value.Value.splice(i, 1);
};
//结束编辑
const closeEdit = () => {
  addList.value[editIndex.value] = editForm.value;
  editFlag.value = false;
};
//添加标题
const addHandle = () => {
  listFlag.value = true;
};

//选择字段
const addItem = (item) => {
  const id = addList.value.length;
  addList.value.push({
    label: item.label,
    Type: item.Type,
    Key: item.Key,
    PromptText: item.PromptText,
    Value: item.Value,
    State: item.State,
    id: id,
  });
  listFlag.value = false;
  currentIndex.value = addList.value.length - 1;
};
//下一步
const createHandle = () => {
  if (!form.tempTitle) {
    return Toast.fail("模板名称不能为空");
  }
  if (!addList.value.length) {
    return Toast.fail("字段项不能为空");
  }
  for (let i = 0; i < addList.value.length; i++) {
    if (!addList.value[i].Key) {
      return Toast.fail("标题不能为空");
    }
  }
  let tempLog = {
    fields: addList.value,
    name: form.tempTitle,
  };
  localStorage.setItem("tempLog", JSON.stringify(tempLog));
  router.push({ name: "permissionLog", query: { id: currentId.value } });
};
</script>
<style lang="scss" scoped>
@import "../base.scss";
.temp_container {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 40px 0;
  padding-bottom: 30px;
  box-sizing: border-box;
  .content_container {
    width: 100%;
    height: 95%;
    overflow-y: scroll;
    .title_container {
      width: 100%;
      margin: 20px 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background-color: #fff;
      .star {
        font-weight: bold;
        font-size: 0.6rem;
        color: red;
        display: flex;
        align-items: center;
        padding-top: 6px;
        padding-left: 6px;
        box-sizing: border-box;
      }
      :deep(.van-cell) {
        font-size: 0.5rem;
      }
    }
    .list_container {
      .activeClass {
        border: 2px solid #4aa2e2;
        border-left: none;
        border-right: none;
        box-shadow: 0 0 2px #4aa2e2;
      }
      .drag {
        width: 100%;
      }
      .item_li {
        width: 100%;
        background-color: #fff;
        padding: 5px 0;
        box-sizing: border-box;
        margin: 10px 0;
        cursor: pointer;
        position: relative;
        .star {
          position: absolute;
          top: 15px;
          left: 5px;
          font-weight: bold;
          font-size: 0.6rem;
          color: red;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          z-index: 99;
        }
        :deep(.van-cell) {
          width: 100%;
          font-size: 0.5rem;
        }
        .special {
          display: flex;
          align-items: center;
          border: none;
          border-bottom: 2px solid #f4f4f4;
          :deep(.van-cell:after) {
            border: none;
          }
        }
        .handle {
          color: #4aa2e2;
          font-size: 0.4rem;
          padding: 10px 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .handle_li {
            display: flex;
            align-items: center;
            margin: 0 10px;
          }
        }
      }
      .add_btn {
        width: 90%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 0.5rem;
        color: #acadb1;
        border: 1px solid #acadb1;
        border-radius: 5px;
        box-shadow: 0 0 1px #acadb1;
        cursor: pointer;
        &:hover {
          color: #4aa2e2;
          box-shadow: 0 0 1px #4aa2e2;
          border: 1px solid #4aa2e2;
          :deep(.van-icon) {
            color: #4aa2e2 !important;
          }
        }
        .text {
          margin-left: 5px;
        }
      }
    }
  }
  .bottom_container {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: 0 10px;
    box-sizing: border-box;
    .text_item {
      width: 20%;
      font-size: 0.4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .text {
        color: #acadb1;
      }
    }
    .btn_item {
      width: 80%;
      font-size: 0.4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .btn {
        width: 100%;
        height: 40px;
        background-color: #006afc;
        border-radius: 8px;
        font-size: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
  }
  .add_container {
    width: 100%;
    height: 100%;
    .add_title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 0.5rem;
      text-align: center;
      border-bottom: 1px solid #f4f4f4;
    }
    .add_item {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 0.4rem;
      padding-left: 10px;
      box-sizing: border-box;
      .item_text {
        flex: 1;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid #f9f9f9;
        margin-left: 10px;
      }
    }
  }
  .edit_container {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 40px;
    box-sizing: border-box;
    .edit_title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 0.5rem;
      text-align: center;
      border-bottom: 1px solid #f4f4f4;
      position: absolute;
      top: 0;
      left: 0;
      .save {
        position: absolute;
        height: 60%;
        top: 5px;
        right: 10px;
        padding: 0 10px;
        background-color: #4aa2e2;
        cursor: pointer;
        color: #fff;
        font-size: 0.4rem;
        border-radius: 5px;
        display: flex;
        align-items: center;
      }
    }
    .edit_box {
      width: 100%;
      height: 100%;
      background-color: #f6f6f6;
      .edit_item {
        padding-left: 0.5rem;
        box-sizing: border-box;
        background-color: #fff;
        .item_content {
          border-bottom: 2px solid #f6f6f6;
          padding: 0.2rem 0;
          .item_label {
            font-size: 0.3rem;
            color: #9e9e9e;
          }
          .item_name {
            font-size: 0.5rem;
            :deep(.van-cell) {
              padding-left: 0;
              box-sizing: border-box;
            }
          }
        }
      }
      .edit_options {
        .label {
          color: #afafaf;
          font-size: 0.4rem;
          padding: 0.4rem;
          box-sizing: border-box;
        }
        .option_box {
          width: 100%;
          padding: 0.3rem 0;
          box-sizing: border-box;
          padding-left: 0.3rem;
          box-sizing: border-box;
          background-color: #fff;
          .option_item {
            width: 100%;
            border-bottom: 2px solid #f6f6f6;
            display: flex;
            align-items: center;
            cursor: pointer;
            .del_icon {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background-color: red;
              display: flex;
              justify-content: center;
              align-items: center;
              .line {
                width: 50%;
                height: 3px;
                background-color: #fff;
                border-radius: 3px;
              }
            }
            .add_icon {
              display: flex;
              align-items: center;
            }
            .add_text {
              margin: 10px;
              font-size: 0.4rem;
            }
            .option_value {
              margin-left: 10px;
              font-size: 0.4rem;
              flex: 1;
            }
            .drag_icon {
              margin-right: 30px;
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .edit_require {
        margin-top: 20px;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        font-size: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
      }
    }
  }
}
</style>
